<template>
	<view class="container">
		<view v-for="(item ,index) in answerSheet" class="item" :key="index">
			<view v-if="titleVisible(index)" class="item-title-view">
				<view class="item-title-top"></view>
				<view class="item-title">{{item.dimensionName}}</view>
			</view>
			<view class="content-view">
				<text>{{item.title}}({{item.month}}月龄题目标号{{item.indexOnPaper}})</text>
				<image v-if="item.checked" class="item-check-yes" 
					src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/assess-yes.png">
				</image>
				<image v-else class="item-check-no"
					src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/assess-no.png">
				</image>
			</view>
			<view v-if="lineVisible(index)" class="suggest--exline"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			answerSheet: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				titleVisible(index) {
					if (index > 0){
						var now = this.$props.answerSheet[index].dimensionName;
						var last = this.$props.answerSheet[index-1].dimensionName;
						if (now === last){
							return false;
						}
					}
					return true;
				},
				
				lineVisible(index) {
					if (index < this.$props.answerSheet.length-1){
						var now = this.$props.answerSheet[index].dimensionName;
						var last = this.$props.answerSheet[index+1].dimensionName;
						if (now === last){
							return false;
						}
					}
					return true;
				}
			};
		},

		created() {
			this.initData();
		},

		methods: {
			initData() {
				// for (var index in this.$props.answerSheet) {
					
				// }
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #FFFFFF;
	}
	
	.item{
		background-color: #FFFFFF;
	}
	
	.item-title-view{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}
	
	.item-title-top{
		width:10px;
		height:15px;
		background:rgba(250,203,47,1);
		opacity:1;
	}
	
	.item-title{
		font-size:30rpx;
		font-weight:bold;
		color:rgba(34,34,34,1);
		opacity:1;
		margin-left: 10rpx;
	}
	
	.content-view{
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		align-items: center;
		justify-content: space-between;
		
		font-size: 30rpx;
		color: #333333;
	}

	.item-check-yes{
		width: 36rpx;
		height: 25rpx;
	}
	
	.item-check-no{
		width: 30rpx;
		height: 30rpx;
	}
	
	.suggest--exline{
		border-top:1px dashed $app-main-color;
		height: 1px;
		overflow:hidden;
		margin-top: 30rpx;
	}
</style>
